<template>
  <section>
    <el-form class="submit-form" ref="subjectForm" :model="form" :rules="rules" label-position="left" label-width="150px">
      <el-form-item label="项目名称" prop="projectName">
        <el-input v-model="form.projectName"></el-input>
      </el-form-item>
      <el-form-item label="项目类型" prop="projectType">
        <el-radio-group v-model="form.projectType">
          <el-radio label="1">P2P</el-radio>
          <el-radio label="2">众筹</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="项目金额" prop="projectAmt">
        <el-input v-model="form.projectAmt"></el-input>
      </el-form-item>
      <el-form-item label="还款方式" prop="repaymentType">
        <el-radio-group v-model="form.repaymentType">
          <el-radio label="0">月还息到期还本</el-radio>
          <el-radio label="1">等额本息</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="利率类型" prop="rateType">
        <el-radio-group v-model="form.rateType">
          <el-radio label="1">固定</el-radio>
          <el-radio label="2">浮动</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="利率值" prop="rateVal" v-if="form.rateType == 1">
        <el-input v-model="form.rateVal"></el-input>
      </el-form-item>
      <el-form-item label="最小利率值" prop="rateMinVal" v-if="form.rateType == 2">
        <el-input v-model="form.rateMinVal" placeholder="利率浮动不为空"></el-input>
      </el-form-item>
      <el-form-item label="最大利率值" prop="rateMaxVal" v-if="form.rateType == 2">
        <el-input v-model="form.rateMaxVal" placeholder="利率浮动不为空"></el-input>
      </el-form-item>
      <el-form-item label="周期值" prop="cycVal">
        <el-input v-model="form.cycVal" placeholder="周期(天)"></el-input>
      </el-form-item>
      <el-form-item label="项目用途" prop="projectUse">
        <el-input v-model="form.projectUse"></el-input>
      </el-form-item>
      <el-form-item label="融资方账户类型" prop="finaAccType">
        <el-radio-group v-model="form.finaAccType">
          <el-radio label="1">个人</el-radio>
          <el-radio label="2">企业</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="融资方证件号码" prop="finaCertNo">
        <el-input v-model="form.finaCertNo"></el-input>
      </el-form-item>
      <el-form-item label="融资方姓名" prop="finaName">
        <el-input v-model="form.finaName"></el-input>
      </el-form-item>
      <el-form-item label="融资方手机号" prop="mobile">
        <el-input v-model="form.mobile" placeholder="手机号为开通IPS账号的注册手机"></el-input>
      </el-form-item>
      <el-form-item label="是否超额" prop="isExcess">
        <el-radio-group v-model="form.isExcess">
          <el-radio label="0">否</el-radio>
          <el-radio label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('subjectForm')">创建标的</el-button>
        <el-button @click="reset('subjectForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>
<script>
  import {
    mapGetters,
    mapActions
  } from 'vuex'

  export default {
    data() {
      let checkProjectAmt = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入项目借贷金额'));
        }
        if (!/^(([1-9]{1}\d*)|([0]{1}))(\.(\d){1,2})?$/.test(value)) {
          return callback(new Error('请输入正确的借贷金额'));
        }
        callback();
      };
      let checkCycVal = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入借贷周期'));
        }
        if (!/^[1-9]\d*$/.test(value)) {
          return callback(new Error('请输入正确的借贷天数'));
        }
        callback();
      };
      let checkFinaCertNo = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入融资方证件号码'));
        }
        if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
          return callback(new Error('请输入正确的证件号码'));
        }
        callback();
      };
      let checkMobile = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入融资方手机号'));
        }
        if (!/^(13[0-9]|14[5|7]|15[0-9]|17[0-9]|18[0-9])\d{8}$/.test(value)) {
          return callback(new Error('请输入正确的手机号码'));
        }
        callback();
      };
      const validateFloat = value => {
        return /^(([1-9]{1}\d*)|([0]{1}))(\.(\d){1,1})?$/.test(value);
      }
      let checkFixedRate = (rule, value, callback) => {
        if (this.form.rateType == 1) { // 利率类型为固定
          if (!value) {
            return callback(new Error('请输入利率值'));
          }
          if (!validateFloat(value)) {
            return callback(new Error('请输入正确的利率值'));
          }
        }
        callback();
      };
      let checkMinFloatRate = (rule, value, callback) => {
        if (this.form.rateType == 2) { // 利率类型为浮动
          if (!value) {
            return callback(new Error('请输入利率值'));
          }
          if (!validateFloat(value)) {
            return callback(new Error('请输入正确的利率值'));
          }
          if (this.form.rateMaxVal != '') {
            this.$refs.subjectForm.validateField('rateMaxVal');
          }
        }
        callback();
      };
      let checkMaxFloatRate = (rule, value, callback) => {
        if (this.form.rateType == 2) { // 利率类型为浮动
          if (!value) {
            return callback(new Error('请输入利率值'));
          }
          if (!validateFloat(value)) {
            return callback(new Error('请输入正确的利率值'));
          }
          if (this.form.rateMinVal > this.form.rateMaxVal) {
            return callback(new Error('最大利率值不能小于最小利率值'));
          }
        }
        callback();
      };

      return {
        rules: {
          projectName: [{
            required: true,
            message: '请输入标的名称',
            trigger: 'blur'
          }],
          projectAmt: [{
            required: true,
            validator: checkProjectAmt,
            trigger: 'blur'
          }],
          cycVal: [{
            required: true,
            validator: checkCycVal,
            trigger: 'blur'
          }],
          projectUse: [{
            required: true,
            message: '请输入借贷用途',
            trigger: 'blur'
          }],
          finaCertNo: [{
            required: true,
            validator: checkFinaCertNo,
            trigger: 'blur'
          }],
          finaName: [{
            required: true,
            message: '请输入融资方姓名',
            trigger: 'blur'
          }],
          mobile: [{
            required: true,
            validator: checkMobile,
            trigger: 'blur'
          }],
          projectType: [{
            required: true
          }],
          repaymentType: [{
            required: true
          }],
          rateType: [{
            required: true
          }],
          rateVal: [{
            required: true,
            validator: checkFixedRate
          }],
          rateMinVal: [{
            required: true,
            validator: checkMinFloatRate
          }],
          rateMaxVal: [{
            required: true,
            validator: checkMaxFloatRate
          }],
          finaAccType: [{
            required: true
          }],
          isExcess: [{
            required: true
          }]
        }
      };
    },
    computed: {
      ...mapGetters([
        'form'
      ])
    },

    methods: {
      ...mapActions([
        'submit',
        'resetForm'
      ]),
      onSubmit(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.submit({
              vm: this,
              formName
            });
          } else {
            this.$alert('提交数据不正确,请检查', '提示', {});
          }
        })

      },
      reset(formName) {
        this.resetForm({
          vm: this,
          formName: formName
        });
      }
    }
  }
</script>